<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:a4j="http://richfaces.org/a4j">

    <h:head>
        <title>.: Supermercado Kwik-E-Mart :.</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet name="css/app.css" ></h:outputStylesheet>
        <h:outputStylesheet library="css" name="bootstrap-theme.min.css" ></h:outputStylesheet>
        <h:outputStylesheet library="css" name="bootstrap.min.css" ></h:outputStylesheet>

    </h:head>

    <h:body class="fondoPagin">
        <div id="wrap" >
            <h:panelGroup id="panelheader">
                <ui:include src="template/Header.xhtml" />
            </h:panelGroup>
            <h:form>

                <div class="container" style="padding-bottom: 100px;">
                    <div class="container">
                        <br/>
                        <div style="text-align: center;">
                            <h:graphicImage width="90%" height="250" value="/resources/images/categorias/HOME CARRO.png" />
                        </div>
                        <h:panelGroup rendered="#{listadoProductosBean.totalcantidadProductos == 0}">
                            <div class="alert alert-info" role="alert" style="text-align: center;"> <h3>! Debes Ingresar Productos a tu carro de Compras !</h3></div>
                        </h:panelGroup>
                        <h:panelGroup rendered="#{listadoProductosBean.totalcantidadProductos > 0}">
                            <div class="panel panel-default" >
                                <!-- Default panel contents -->
                                <div class="panel-primary"  ><h3 style="text-align: center; color: #d43f3a">Listado de productos </h3></div>

                                <!-- Table -->
                                <table class="table" id="PanelLista">
                                    <thead>
                                        <tr>
                                            <th style="text-align: center">Descripcion del producto</th>

                                            <th>Cantidad</th>
                                            <th>Precio unidad</th>
                                            <th>Total</th>
                                            <th>Eliminar</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        <a4j:repeat  value="#{listadoProductosBean.listaDetallepedido}" var="cap"  id="repeat" >
                                            <tr>

                                                <td><div style="text-align: center"><h3>#{cap.idProducto.nombreProducto}</h3><h:graphicImage width="140" height="140" value="#{cap.idProducto.urlImagen}" class="img-circle" /></div></td>
                                                <td>#{cap.cantidad}</td>
                                                <td>#{cap.costo}</td>
                                                <td><h:outputText value="#{(cap.cantidad*cap.costo)}"></h:outputText></td>
                                                <td><h:commandButton style="  border-radius: 15px 15px 15px 15px;
                                                                     font-size: 20px;
                                                                     background-color: #dd0a07;
                                                                     color: #ffffff;
                                                                     box-shadow: inset 0px 0px 100px #dd0a07;
                                                                     "  action="#{listadoProductosBean.eliminarProductoList(cap.idProducto)}" value="Eliminar" ></h:commandButton></td>

                                            </tr>
                                        </a4j:repeat>
                                        <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                                        <tr><td></td><td></td><td style="color: #d43f3a"><h4>Total precio productos</h4></td><td><h:outputText value="#{listadoProductosBean.totalPrecioProductos}"></h:outputText></td><td><h:commandButton style="  border-radius: 15px 15px 15px 15px;
                                                    font-size: 20px;
                                                    background-color: #dd0a07;
                                                    color: #ffffff;
                                                    box-shadow: inset 0px 0px 100px #dd8e0a;
                                                                                                                                                                                                        " value="Pagar pedido" action="PagarPedido.xhtml"></h:commandButton></td></tr>
                                        
                                    </tbody>
                                </table>
                            </div>

                        </h:panelGroup>
                    </div>
                </div>

            </h:form>
        </div>
        <div id="footer">
            <ui:include src="template/Footer.xhtml" />
        </div>
    </h:body>
</html>